﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>组织机构 </title>
    <link href="../static/css/admin.css?v=6" rel="stylesheet" />
    <script src="../static/js/boot.js?v=2"></script>
    <script src="../static/js/admin.js?v=2"></script>
    <link href="../static/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="../static/lib/zTree_v3/js/jquery.ztree.core.min.js"></script>
    <script src="../static/lib/zTree_v3/js/jquery.ztree.exhide.min.js"></script>
    <script src="../static/lib/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
    <script src="../static/lib/zTree_v3/js/jquery.ztree.exedit.min.js"></script>
    <script src="../static/lib/zTree_v3/demo/js/fuzzysearch.js"></script>

    <style>
        #zTreesso {
            width: 100%;
            height: 33px;
            margin-top: 7px;
            margin-left: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body style="margin:0px;padding:0px;overflow:hidden;">
    <script>var apiUrl = API_PATH + "/Organize/";
        var treeNodeId = "";
        $(function () {
            $('#layout').layout();
            treeView();
            gridList();
        })
        function treeView() {
            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                data: {
                    key: {
                        name: "Name",
                    },
                    simpleData: {
                        enable: true,
                        idKey: "ID",
                        pIdKey: "ParentID",
                        rootPId: ""
                    }
                },
                callback: {
                    // 单击事件
                    onClick: function zTreeOnClick(event, treeId, treeNode) {
                        //console.log(treeNode)
                        treeNodeId = treeNode.ID;
                        $("#txt_keyword").val('');
                        $('#btn_search').trigger("click");
                    }
                }
            };
            $.ajax({
                url: apiUrl + "GetAll",
                type: "get",
                dataType: "json",
                success: function (data) {
                    var zTreeObj = $.fn.zTree.init($("#itemTree"), setting, data);
                    fuzzySearch('itemTree', '#zTreesso', null, true); //初始化模糊搜索方法
                }
            });
        }
        function gridList() {
            var $gridList = $("#gridList");
            $gridList.dataGrid({
                url: apiUrl + "GetGridDataJson",
                postData: search_param(),
                datatype: "json",
                contentType: 'application/json',
                loadBeforeSend: function (jqXHR) {
                    jqXHR.setRequestHeader("Authorization", 'Bearer ' + window.LS.get("lmgcmstoken"));
                },
                colModel: [
                    { label: "主键", name: "ID", hidden: true, key: true },
                    { label: '名称', name: 'Name', width: 200, align: 'left', frozen: true },
                    { label: '图标', name: 'Icon', width: 100, align: 'left' },
                    {
                        label: "有效", name: "Status", width: 100, align: "center",
                        formatter: function (cellvalue, options, rowObject) {
                            var keyId = rowObject.ID;
                            return cellvalue == 0 ? "<i onclick='Switch(\"" + keyId + "\")' class=\"fa fa-toggle-on\"  style=\"margin-top:7px;\"></i>" : "<i onclick='Switch(\"" + keyId + "\")' class=\"fa fa-toggle-off\"  style=\"margin-top:7px;\"></i>";
                        }
                    },
                    {
                        label: '排序', name: 'OrderBy', width: 100, align: 'left',
                        formatter: function (cellvalue, options, rowObject) {
                            var keyId = rowObject.ID;
                            return "<input type='text' name='OrderBy[" + keyId + "]' autocomplete='off' style='width: 50px; height: 16px;margin-top:6px;' onchange='UpdateOrderBy(\"" + keyId + "\",this.value)' value=" + cellvalue + " />";
                        }
                    }
                ],
                rowNum: 20,
                rowList: [20, 50, 100],
                pager: '#gridPager',
                sortname: 'OrderBy',
                sortorder: "DESC",
                viewrecords: false,
                multiselect: true,

            });
            $("#btn_search").click(function () {
                $gridList.jqGrid('setGridParam', {
                    url: apiUrl + "GetGridDataJson",
                    postData: search_param(),
                }).trigger('reloadGrid');
            });
        }
        function search_param() {
            var postData = {
                pId: treeNodeId,
                keyword: $("#txt_keyword").val()
            };
            return postData;
        }

        function btn_add() {
            $.modalOpen({
                id: "Form",
                title: "新增",
                url: "org/form.html",
                width: "700px",
                height: "440px",
                callBack: function (iframeId) {
                    top.frames[iframeId].submitForm();
                    treeView();
                    gridList();
                }
            });
        }
        function btn_edit(id) {
            if (id == "" || id == undefined) {
                var ids = gridselId();
                if (ids == "" || ids == undefined) {
                    $.modalAlert("请选择一条数据", "warning");
                    return;
                }
                id = ids[0];
            }
            $.modalOpen({
                id: "Form",
                title: "修改",
                url: "org/form.html?keyValue=" + id,
                width: "800px",
                height: "600px",
                callBack: function (iframeId) {
                    top.frames[iframeId].submitForm();
                }
            });
        }
        function btn_delete(id) {
            if (id == "" || id == undefined) {
                var ids = gridselId();
                if (ids == "" || ids == undefined) {
                    $.modalAlert("请选择数据", "warning");
                    return;
                }
                id = ids.join(",");
            }
            $.deleteForm({
                url: apiUrl + "DeleteForm?keyId=" + id,
                success: function () {
                    $("#gridList").trigger("reloadGrid");
                }
            });
        }
        // 1,2,3,4
        function gridselId() {
            var myArray = new Array()
            var s = $("#gridList").jqGrid('getGridParam', 'selarrrow');
            if (s.length > 0) {
                for (var i = 0; i < s.length; i++) {
                    if (s[i]) {
                        var ret = $("#gridList").jqGrid('getRowData', s[i]);
                        myArray.push(ret.ID);
                    }
                }
            } else {
                myArray.push($("#gridList").jqGridRowValue().ID);
            }
            return myArray;
        }
        //关闭有效触发
        function Switch(keyId) {
            $.ajax({
                url: apiUrl + "Switch?keyId=" + keyId,
                data: {},
                type: "POST",
                dataType: "json",
                async: false,
                success: function () {
                    $("#gridList").resetSelection();
                    $("#gridList").trigger("reloadGrid");
                }
            });
        }
        function UpdateOrderBy(keyId, cellvalue) {
            $.ajax({
                url: apiUrl + "UpdateOrderBy?keyId=" + keyId + "&value=" + cellvalue,
                data: {},
                dataType: "json",
                type: "POST",
                success: function () {
                    $("#gridList").resetSelection();
                    $("#gridList").trigger("reloadGrid");
                }
            });
        }
        function UpdateField(keyId, fieldName, fieldValue) {
            $.ajax({
                url: apiUrl + "UpdateField?keyId=" + keyId + "&fieldName=" + fieldName + "&fieldValue=" + fieldValue,
                data: {},
                type: "POST",
                dataType: "json",
                async: false,
                success: function () {
                    $("#gridList").resetSelection();
                    $("#gridList").trigger("reloadGrid");
                }
            });
        }</script>

    <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
        <div class="ui-layout-west">
            <input id="zTreesso" name="zTreesso" type="text" placeholder="请输入关键字" />
            <ul id="itemTree" class="ztree"></ul>
        </div>
        <div class="ui-layout-center">
            <div class="topPanel">
                <div class="toolbar">

                    <div class="btn-group">
                        <a id="NF-add" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_add()"><i class="fa fa-plus"></i>新增</a>
                    </div>
                    <div class="btn-group">
                        <a id="NF-edit" authorize="yes" class="btn btn-warning dropdown-text" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>修改</a>
                    </div>
                    <div class="btn-group">
                        <a id="NF-delete" authorize="yes" class="btn btn-danger dropdown-text" onclick="btn_delete()"><i class="fa fa-trash-o"></i>删除</a>
                    </div>
                    <div class="btn-group">
                        <a id="NF-export" authorize="yes" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><i class="fa fa-file-excel-o"></i>导出<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a onclick="btn_export('JSON')">JSON</a></li>
                            <li><a onclick="btn_export('XML')">XML</a></li>
                            <li><a onclick="btn_export('PNG')">PNG</a></li>
                            <li><a onclick="btn_export('CSV')">CSV</a></li>
                            <li><a onclick="btn_export('TXT')">TXT</a></li>
                            <li><a onclick="btn_export('SQL')">SQL</a></li>
                            <li><a onclick="btn_export('Word')">MS-Word</a></li>
                            <li><a onclick="btn_export('Excel')">Ms-Excel</a></li>
                            <li><a onclick="btn_export('Powerpoint')">Ms-Powerpoint</a></li>
                            <li><a onclick="btn_export('PDF')">PDF</a></li>
                        </ul>
                    </div>



                </div>
                <div class="search">
                    <table>
                        <tr>
                            <td>
                                <div class="input-group">
                                    <input id="txt_keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
                                    <span class="input-group-btn">
                                        <button id="btn_search" type="button" class="btn  btn-primary"><i class="fa fa-search"></i></button>
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="gridPanel">
                <table id="gridList"></table>
                <div id="gridPager"></div>
            </div>
        </div>
    </div>
</body>
</html>